{extend name="layout/layout" /}

{block name="pagecss"}
<style>
    .form-horizontal .pro_type label {
        font-size: 13px;
        color: #999999;
        line-height: 34px;
        text-align: center;
        display: inline-block;
        position: relative;
        margin: 0 10px 15px 0;
        border: solid 1px #c2cad8;
        padding: 7px 22px;
        line-height: 1.44;
    }
    .form-horizontal .pro_type input[type="checkbox"]{appearance: none;-webkit-appearance: none;}
    .form-horizontal .pro_type input[type="checkbox"]:checked{}
    .form-horizontal .pro_type label.active,.form-horizontal .pro_type label:hover{border: solid 1px #33CC66;background: #33CC66;color: #fff;}
    .form-horizontal .radio-inline.xf_tip{display: none;padding-top: 0;}
</style>
{/block}

{block name="content"}
<div class="row">
    <div class="col-xs-12">
        <div class="box box-success">
            <div class="box-header with-border">
                <h3 class="box-title">设置订单商品的配送方式和运费，并根据买家增加商品而追加运费</h3>
                <div class="box-tools">
                    <!--<button class="btn bg-navy btn-sm" data-toggle="tooltip" title="" data-original-title="Back" onclick="history.go(-1);">
                        <i class="fa fa-reply"></i> 返回
                    </button>-->
                </div>
            </div>
            <div class="box-body">
                <form id="modal_new_role" class="form-horizontal form validation-form" method="post" enctype="multipart/form-data">
                    {:token()}
                    <div class="form-body">
                        <div class="box-content col-md-8  table-bordered table" style="padding: 25px">
                            <div style="float: left">
                                <img class="margin-right" src="__STATIC__/admin/img/u5338.png">
                            </div>
                           <div style="margin-left: 100px">
                                <p style="font-size: 18px">到店自取</p>
                                 <p> 用户可以到指定门店自行取货</p>
                           </div>
                        </div>

                        <div class="row">
                            <div class="form-group">
                                <label class="col-lg-3 col-xs-4 control-label" style="margin-top: 30px"> <span class="required"> * </span>是否启用：</label>
                                <div class=" col-lg-4 col-xs-3" style="margin-top: 30px">
                                    <div class="relative">
                                        {if condition="($status == 1)"}
                                        <label class="radio-inline">
                                            <input class="is_enable" type="radio" name="is_enable" value="1" checked/>
                                            是
                                        </label>
                                        <label class="radio-inline">
                                            <input class="is_enable" type="radio" name="is_enable"  value="0" />
                                            否</label>
                                        {else /}
                                        <label class="radio-inline">
                                            <input class="is_enable" type="radio" name="is_enable" value="1" />
                                            是
                                        </label>
                                        <label class="radio-inline">
                                            <input class="is_enable" type="radio" name="is_enable"  value="0" checked />
                                            否</label>
                                        {/if}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group">
                                <label class="col-lg-3 col-xs-4 control-label"> <span class="required">   * </span>打包费用：</label>
                                <div class="  form-inline">
                                    <input id="packingCharge" class="orderStartingPrice input-s form-control margin-left" value="{if condition='($packingCharge)'  neq ' ' }{$packingCharge} {else /} {/if}" type="text" name="packingCharge"/>
                                    <span class="margin-left">元</span>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group">
                                <label class="col-lg-3 col-xs-4 control-label"> <span class="required">   * </span>适用门店：</label>
                                <div class="col-lg-6 col-xs-2">
                                    {if condition="($applicableType == 1)"}
                                    <input class="shop_type" type="radio" name="shop_type" value="1" checked  /><span >所有门店（以后新增的门店也将自动适用）</span></br>
                                    <input class="shop_type" type="radio" name="shop_type"  value="2" /><span >特定门店（未选中的门店不适用）</span>
                                    {else/}
                                    <input class="shop_type" type="radio" name="shop_type" value="1"   /><span >所有门店（以后新增的门店也将自动适用）</span></br>
                                    <input class="shop_type" type="radio" name="shop_type"  value="2" checked/><span >特定门店（未选中的门店不适用）</span>
                                    {/if}
                                </div>
                            </div>
                        </div>

                        <div class="row" hidden id="select_tenant">
                            <div class="form-group">
                                <label class="col-lg-3 col-xs-4 control-label"></label>
                                <div class="col-lg-6 col-xs-2 data pro_type">
                                    {volist name="stores" id="vo"}
                                    <label class='btn btn-default checkbox-inline margin-bottom {in name="vo.id" value="$storeIds"}active{/in} ' ><input type="checkbox" name="stores"  {in name="vo.id" value="$storeIds"}checked{/in} value="{$vo.id}" style='position: relative !important; padding: 0;margin: 0;' >{$vo.name}</label>
                                    {/volist}
                                </div>
                            </div>
                        </div>

                        <div class="row" id="select_tenant1">
                            <div class="form-group">
                                <label class="col-lg-3 col-xs-4 control-label"></label>
                                <div class="tenant_select_val ">
                                </div>
                            </div>
                        </div>

                        <hr />

                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-md-3 control-label"></label>
                                        <div class="col-md-9" style="text-align: center">
                                            <button type="button" class="btn btn-primary" id="selfTypeId">
                                                保存 <i class="fa fa-floppy-o"></i>
                                            </button>
                                            <button type="button" class="btn btn-default" onclick="history.go(-1);">
                                                返回 <i class="fa fa-mail-forward"></i>
                                            </button>
                                            <div class="help-block " style="color:red"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="pagescript"}
<script>
    $(function(){
        var $tenantArr = [];

        $(".tenant_select_val").find('.store-class').click(function(){

            var storeId = $(this).attr('store-id');
            var reindex = "";
            $.each($tenantArr,function(index,el){
                if(el.id == storeId){
                    reindex = index;
                }
            });
            $tenantArr.remove($tenantArr[reindex])
            valStr = JSON.stringify($tenantArr)
            $(this).parent().remove();
        });

        var applicableType = '{$applicableType}';

        if(applicableType == 2){
            $("#select_tenant").css('display','block');
        }

        $(".data label").click(function() {   //选择权限
            if ($(this).is(".active")) {
                $(this).removeClass("active");
                $(this).find("input[type='checkbox']").prop("checked", false);
                return false;
            } else {
                $(this).addClass("active");
                $(this).find("input[type='checkbox']").prop("checked", true);
                return false;
            }
        });


        //保存自取配置
        $("#selfTypeId").click(function(){
            var _data = $("#modal_new_role").serializeObject();
            if (!mdTool.validate(_data.packingCharge, 'require')) {
                layer.msg('请打包费用，免费请输入0',{icon: 5,time:1000});
                $("#packingCharge").focus();
                return false;
            }
            if(_data.shop_type == '2'){
                if (!mdTool.validate(_data.stores, 'require')) {
                    layer.msg('请至少选择一个门店',{icon: 5,time:1000});
                    return false;
                }
            }
            var type_id = '{$typeId}';
            if(type_id){
                _data.type_id = type_id;
            }
            var shop_type_1 = 1;//适用门店类型   1所有门店 2指定门店
            var shop_type_2 = 2;
            var status = $("input[name='is_enable']:checked").val();
            var packingCharge = $("#packingCharge").val();
            var shop_type = $("input[name='shop_type']:checked").val();
            var selfTypeStoreIds = null;
            var selfTypeStoreIdsArr = [];


            var url = "/admin/TenantDistributionType/ajax_add_or_update_self";
            var index_url = '/admin/TenantDistributionType/index'
            $.ajax({
                type: 'POST',
                url: url,
                data : JSON.stringify(_data),
                dataType: 'json',
                contentType:"application/json; charset=utf-8",
                success: function(data){
                    if(data.status == 1){
                        layer.msg(data.message,{icon: 6,time:1000});
                        location.href = index_url;
                    }


                },
                error:function(data) {

                },
            });
        });

        $(".shop_type").click(function(){
            var $stores = '{$stores}';

            if($stores.length==0){
                layer.msg("未发现门店，请创建门店",{icon: 6,time:1000});
                return false;
            }
            $("#select_tenant").css('display','block');
            $(".shop_type").removeAttr("checked");
            $(this).attr("checked",true);
            $(this).prop("checked",true);
            if($(this).val()==1){
                $('.tenant_select_val').children().remove();
                $("#select_tenant").hide();
            }else{
                if($('.tenant_select_val').children().length>0)
                    return false;
                $("#select_tenant").show();
            }
        });




        $("#tenant").change(function(){

            console.log($tenantArr)
            var $tenantObj = {};
            var flag = true;
            var $thisVal = $(this).val();
            console.log('thisVal:'+$thisVal)
            console.log('$tenantArr:'+JSON.stringify($tenantArr))
            $(this).find("option[value!="+$thisVal+"]").attr("selected",false);
            $(this).find("option[value="+$thisVal+"]").attr("selected",true);
            console.log(JSON.stringify($tenantArr))
            var $_thisval =   $("#tenant").find("option:selected").val();
            var $_thistext = $("#tenant").find("option[value="+$_thisval+"]").text();
            console.log('$_thisval:'+$_thisval)
            $tenantObj.id=$_thisval;
            $tenantObj.name=$_thistext;
            $.each($tenantArr,function (index,el) {
                if(el.id == $_thisval){
                    flag = false;
                }
            });
            if(flag){
                $tenantArr.push($tenantObj) ;
                var html = '<div class="table-bordered  text-muted  col-lg-3 col-xs-2" style="margin-left: 20px">'+
                    $_thistext+
                    '<i class="layui-icon  layui-col-md-offset3 store-class" store-id ="'+$_thisval+'">'+'&#x1006'+'</i>'
                '</div>'
                $(".tenant_select_val").append(html);
                valStr = JSON.stringify($tenantArr)
            }

            //test
            $(".tenant_select_val").find('.store-class').click(function(){

                var storeId = $(this).attr('store-id');
                var reindex = "";

                $.each($tenantArr,function(index,el){
                    if(el.id == storeId){
                        reindex = index;
                    }
                });
                $tenantArr.remove($tenantArr[reindex])
                console.log("tenant:------------"+$tenantArr)
                valStr = JSON.stringify($tenantArr)
                $(this).parent().remove();
            });
        });

        /**
         *删除数组指定下标或指定对象
         */
        Array.prototype.indexOf = function(val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == val) return i;
            }
            return -1;
        };

        Array.prototype.remove = function(val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };

    })
</script>
{/block}